<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-back" @click="goBack">
				<uv-icon name="arrow-left" size='32'></uv-icon>
			</view>
			<text class="header-title">都市</text>
		</view>
		<!-- 分类筛选 -->
		<view class="filter-container">
			<!-- 分类组循环 -->
			<view v-for="(group, gIndex) in filterGroups" :key="gIndex" class="filter-group">
				<!-- 独立左侧列 -->
				<view class="filter-column" :class="{ active: group.activeIndex === 0 }"
					@click="handleSelect(gIndex, 0)">
					{{ group.items[0] }}
				</view>

				<!-- 右侧横向选项 -->
				<scroll-view class="options-scroll" scroll-y :show-scrollbar="false">
					<view class="flex-row">
						<view v-for="(item, index) in group.items.slice(1)" :key="index" class="filter-option"
							:class="{ active: group.activeIndex === index + 1 }"
							@click="handleSelect(gIndex, index + 1)">
							{{ item }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 书籍列表 -->
		<scroll-view scroll-y class="book-list" @scrolltolower="loadMore">
			<view v-for="(item, index) in bookList" :key="index" class="book-item">
				<view class="book-cover">
					<image :src="item.cover" mode="aspectFill" class="cover-img" />
				</view>
				<view class="book-content">
					<view class="book-header">
						<text class="book-name">{{item.name}}</text>
						<text class="book-score">{{item.score}}</text>
					</view>
					<text class="book-desc">{{item.desc}}</text>
					<text class="book-tags">{{item.tags}}</text>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="loading" class="loading-more">
				<view class="loading-icon"></view>
				<text>努力加载中</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterGroups: [{
						items: ['全部', '生活', '异能', '重生', '风云', '生活', '异能', '重生', '风云'],
						activeIndex: 0
					},
					{
						items: ['全部', '10万字以下', '10万-100万字', '100万-300万字', '300万字'],
						activeIndex: 0
					},
					{
						items: ['全部', '完结', '连载'],
						activeIndex: 0
					}
				],
				bookList: [{
					cover: '/static/images/bases/baseimg.png',
					name: '斗罗大陆',
					score: '9.0分',
					desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
					tags: '玄幻·唐家三少·3.8万人在读'
				}, {
					cover: '/static/images/bases/baseimg.png',
					name: '斗罗大陆',
					score: '9.0分',
					desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
					tags: '玄幻·唐家三少·3.8万人在读'
				}, {
					cover: '/static/images/bases/baseimg.png',
					name: '斗罗大陆',
					score: '9.0分',
					desc: '唐门外门弟子唐三偷学内门绝学为唐门所不容，跳崖明志时却发现没有死...',
					tags: '玄幻·唐家三少·3.8万人在读'
				}]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleSelect(groupIndex, itemIndex) {
				this.filterGroups[groupIndex].activeIndex = itemIndex
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f8fa;
	}

	/* 头部导航栏样式 */
	.header {
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;
		background: #fff;

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			color: #333;
		}
	}

	// 分类筛选
	.filter-container {
		padding: 24rpx;
		background: #fff;
		margin-bottom: 10px;
	}

	.filter-group {
		display: flex;
		margin-bottom: 32rpx;
		align-items: baseline;

		&:last-child {
			border: none;
			margin-bottom: 0;
		}
	}

	.filter-column {
		width: 100rpx;
		font-size: 30rpx;
		color: #333;

		&.active {
			color: #ff6a3d;
			font-weight: 500;
		}
	}

	.options-scroll {
		flex: 1;
		height: 150rpx;
	}

	.flex-row {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 10rpx 32rpx;
	}

	.filter-option {
		padding: 12rpx 24rpx;
		flex-shrink: 0;

		&.active {
			color: #ff6a3d;
		}
	}

	/* 书籍列表 */
	.book-list {
		height: calc(100vh - 400rpx);
		/* 根据实际高度调整 */
		width: 100%;
		padding: 0 30rpx;
		background: #fff;
		/* 添加背景色 */

		::v-deep .uni-scroll-view-content {
			width: 90% !important;
		}
	}

	.book-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.book-cover {
		width: 140rpx;
		height: 190rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 24rpx;
	}

	.cover-img {
		width: 100%;
		height: 100%;
		background: #E6F7FF;
		/* 蓝色背景占位 */
	}

	.book-content {
		flex: 1;
	}

	.book-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.book-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.book-score {
		font-size: 28rpx;
		color: #FF2B2B;
	}

	.book-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.book-tags {
		font-size: 24rpx;
		color: #999;
	}

	/* 加载更多 */
	.loading-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		color: #999;
	}

	.loading-icon {
		width: 36rpx;
		height: 36rpx;
		border: 4rpx solid rgba(0, 0, 0, 0.1);
		border-top-color: #FFCC00;
		border-radius: 50%;
		margin-right: 16rpx;
		animation: rotate 1s linear infinite;
	}

</style>